window.addEventListener('load',function() {
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    var index = 0;
    var imgw = ul.children[0].offsetWidth;
    var flag = false;
    clearInterval(timer)
    var timer = setInterval(function() {
        index++;
        var move = -index*imgw;
        ul.style.transform = 'translateX(' + move + 'px)';
        ul.style.transition = 'all 0.3s';
    },2000)
    ul.addEventListener('transitionend', function() {
        if(index >= 3){
            index = 0;
            ul.style.transform = 'translateX(-' + index*imgw + 'px)';
            ul.style.transition = 'none';
        }else if(index < 0){
            index = 2;
            ul.style.transform = 'translateX(-' + index*imgw + 'px)';
            ul.style.transition = 'none';
        }
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
        ol.style.transition = 'all 0.3s';
    })
    var startx =0;
    var movex = 0;
    ul.addEventListener('touchstart', function(e) {
        startx=e.targetTouches[0].pageX;
        clearInterval(timer)
    })
    ul.addEventListener('touchmove', function(e) {
        movex=e.targetTouches[0].pageX-startx;
        var move=-index*imgw+movex;
        ul.style.transform = 'translateX(' + move +'px)';
        ul.style.transition = 'none';
        e.preventDefault();
        clearInterval(timer)
        flag = true;
    })
    ul.addEventListener('touchend', function(e) {
        clearInterval(timer)
        if(flag) {
            flag = false;
            if(Math.abs(movex)>=50){
                if(movex>0){
                    index--;
                    var move = -index*imgw;
                    ul.style.transform = 'translateX(' +move+ 'px)';
                    ul.style.transition = 'all 0.3s';
                }
                else{
                    index++;
                    var move = -index*imgw;
                    ul.style.transform = 'translateX(' + move + 'px)';
                    ul.style.transition = 'all 0.3s';
                }
            }
            else{
                var move = -index*imgw;
                ul.style.transform = 'translateX(' +move+ 'px)';
                ul.style.transition = 'all 0.3s';
            }
        }
        var timer = setInterval(function() {
            index++;
            var move = -index*imgw;
            ul.style.transform = 'translateX(' + move + 'px)';
            ul.style.transition = 'all 0.3s';
        },2000)
    })
    var back = document.querySelector('.back');
    window.addEventListener('scroll', function() {
        if (this.window.pageYOffset>200) {
            back.style.display = 'block';
        }
        if (this.window.pageYOffset<=200) {
            back.style.display = 'none';
        }
    })
    back.addEventListener('click', function(){
        scroll(0,0)
    })
})